<script setup lang="ts">
import { ref } from 'vue'
defineOptions({
  name: 'home-page'
})
const keyword = ref('')
</script>

<template>
  <div class="w-screen h-screen">
    <header class="w-full h-[60px] bg-white px-3 shadow-sm flex items-center justify-between">
      <n-space align="center" justify="space-between">
        <div class="flex items-center justify-center h-full">
          <n-avatar
            round
            size="small"
            src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
          />
        </div>
        <div class="flex flex-col items-start justify-center h-full">
          <p class="text-base font-medium">李老师</p>
          <p class="text-xs text-gray-500">数学学科</p>
        </div>
      </n-space>
      <n-space align="center" justify="space-between">
        <n-button type="primary">
          <n-icon size="20"
            ><svg
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="0px"
              y="0px"
              viewBox="0 0 512 512"
              enable-background="new 0 0 512 512"
              xml:space="preserve"
            >
              <g>
                <path
                  d="M312,372c-7.7,0-14,6.3-14,14c0,9.9-8.1,18-18,18H94c-9.9,0-18-8.1-18-18V126c0-9.9,8.1-18,18-18h186c9.9,0,18,8.1,18,18
		c0,7.7,6.3,14,14,14c7.7,0,14-6.3,14-14c0-25.4-20.6-46-46-46H94c-25.4,0-46,20.6-46,46v260c0,25.4,20.6,46,46,46h186
		c25.4,0,46-20.6,46-46C326,378.3,319.7,372,312,372z"
                ></path>
                <path
                  d="M372.9,158.1c-2.6-2.6-6.1-4.1-9.9-4.1c-3.7,0-7.3,1.4-9.9,4.1c-5.5,5.5-5.5,14.3,0,19.8l65.2,64.2H162
		c-7.7,0-14,6.3-14,14s6.3,14,14,14h256.6L355,334.2c-5.4,5.4-5.4,14.3,0,19.8c0,0,0.1,0.1,0.1,0.1c2.7,2.5,6.2,3.9,9.8,3.9
		c3.8,0,7.3-1.4,9.9-4.1l82.6-82.4c4.3-4.3,6.5-9.3,6.5-14.7c0-5.3-2.3-10.3-6.5-14.5L372.9,158.1z"
                ></path>
              </g></svg
          ></n-icon>
          <span class="ml-[10px]">退出登录</span>
        </n-button>
      </n-space>
    </header>
    <main class="w-full h-[calc(100%-60px)] px-20 py-10">
      <section class="w-full mx-auto">
        <div>
          <h3 class="text-lg font-semibold">班级管理</h3>
          <p class="text-gray-600">管理您的班级信息，包括创建、编辑和删除操作。</p>
        </div>
      </section>
      <div class="w-full mt-5 flex justify-between">
        <n-space align="center" justify="space-between">
          <n-button type="primary">创建班级</n-button>
          <n-button>编辑班级</n-button>
          <n-button>批量删除</n-button>
        </n-space>
        <n-space align="center" justify="space-between">
          <n-input v-model:value="keyword" type="text" placeholder="搜索班级..." />
        </n-space>
      </div>
      <div class="w-full mt-5">
        <section class="w-[286px] h-[140px] p-[10px] bg-white rounded-lg shadow-sm">
          <header class="w-full flex justify-between">
            <n-space>
              <n-checkbox></n-checkbox>
              <span class="font-bold">一年级一班</span>
            </n-space>
          </header>
          <main class="w-full flex justify-between mt-5 font-8px text-gray-500">
            <span>学生数: 32人</span>
            <span>创建时间: 2022-01-01</span>
          </main>
          <footer class="w-full flex justify-between mt-5 p-0">
            <n-button size="small">去评价</n-button>
            <n-space align="center" :size="2">
              <!-- 编辑图标 DataUsageEdit20Regular -->
              <n-icon size="20">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 20 20"
                >
                  <g fill="none">
                    <path
                      d="M4 15h5.986c-.227.3-.4.639-.51 1H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v5.232c-.326.14-.631.343-.897.609L15 9.944V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1zm8-9.5a.5.5 0 0 1 1 0v6.444l-.88.88A.498.498 0 0 1 12 12.5v-7zm-7 2a.5.5 0 0 1 1 0v5a.5.5 0 0 1-1 0v-5zM9 9a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 1 0v-3A.5.5 0 0 0 9 9zm1.98 6.377l4.83-4.83a1.87 1.87 0 1 1 2.645 2.646l-4.83 4.829a2.197 2.197 0 0 1-1.02.578l-1.498.374a.89.89 0 0 1-1.079-1.078l.375-1.498c.096-.386.296-.74.578-1.02z"
                      fill="currentColor"
                    ></path>
                  </g>
                </svg>
              </n-icon>
              <n-icon size="20" color="red">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 24 24"
                >
                  <g fill="none">
                    <path
                      d="M12 1.75a3.25 3.25 0 0 1 3.245 3.066L15.25 5h5.25a.75.75 0 0 1 .102 1.493L20.5 6.5h-.796l-1.28 13.02a2.75 2.75 0 0 1-2.561 2.474l-.176.006H8.313a2.75 2.75 0 0 1-2.714-2.307l-.023-.174L4.295 6.5H3.5a.75.75 0 0 1-.743-.648L2.75 5.75a.75.75 0 0 1 .648-.743L3.5 5h5.25A3.25 3.25 0 0 1 12 1.75zm6.197 4.75H5.802l1.267 12.872a1.25 1.25 0 0 0 1.117 1.122l.127.006h7.374c.6 0 1.109-.425 1.225-1.002l.02-.126L18.196 6.5zM13.75 9.25a.75.75 0 0 1 .743.648L14.5 10v7a.75.75 0 0 1-1.493.102L13 17v-7a.75.75 0 0 1 .75-.75zm-3.5 0a.75.75 0 0 1 .743.648L11 10v7a.75.75 0 0 1-1.493.102L9.5 17v-7a.75.75 0 0 1 .75-.75zm1.75-6a1.75 1.75 0 0 0-1.744 1.606L10.25 5h3.5A1.75 1.75 0 0 0 12 3.25z"
                      fill="currentColor"
                    ></path>
                  </g>
                </svg>
              </n-icon>
            </n-space>
          </footer>
        </section>
      </div>
    </main>
  </div>
</template>

<style scoped lang="scss"></style>
